<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>违章查询</title>
    <style>
        #result td {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="result">
        <input type="text" size="30" v-model.trim="keyword" placeholder="请输入车牌号或车主姓名">
        <input type="button" value="查询" @click="search()">
        <hr>
        <div v-if="searched">
            <table>
                <tr>
                    <th width="100">车牌号</th>
                    <th width="100">车主姓名</th>
                    <th width="150">违章原因</th>
                    <th width="180">违章时间</th>
                    <th width="180">处罚方式</th>
                    <th width="100">是否受理</th>
                    <th width="120">操作</th>
                </tr>
                <tr v-for="record in records">
                    <td>{{ record.car.carno }}</td>
                    <td>{{ record.car.owner }}</td>
                    <td>{{ record.reason }}</td>
                    <td>{{ record.makedate }}</td>
                    <td>{{ record.punish }}</td>
                    <td>
                        <span v-if="record.dealt">已受理</span>
                        <span v-if="!record.dealt">未受理</span>
                    </td>
                    <td>
                        <a href="" @click.prevent="handleRecord(record)">受理</a>
                        <a href="" @click.prevent="deleteRecord(record)">删除</a>
                    </td>
                </tr>
            </table>
            <div class="buttons">
                <a href="" @click.prevent="gotoPrevPage()">上一页</a>&nbsp;&nbsp;
                第{{ currentPage }}页/共{{ totalPage }}页&nbsp;&nbsp;
                <a href="" @click.prevent="gotoNextPage()">下一页</a>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        let app = new Vue({
            el: '#result',
            data: {
                keyword: '',
                records: [],
                currentPage: 1,
                totalPage: 0,
                searched: false
            },
            methods: {
                search() {
                    this.searched = false
                    this.currentPage = 1
                    this.loadData()
                },
                handleRecord(record) {
                    fetch('/api/records/' + record.no + '/', {
                        method: 'PATCH'
                    }).then(resp => {
                        if (resp.status === 200) {
                            record.dealt = true
                        }
                    })
                },
                deleteRecord(record) {
                    if (confirm('确定删除该记录吗?')) {
                        if (record.dealt) {
                            fetch('/api/records/' + record.no + '/', {
                                method: 'DELETE'
                            }).then(resp => {
                                if (resp.status === 204) {
                                    let index = this.records.indexOf(record)
                                    this.records.splice(index, 1)
                                }
                            })
                        } else {
                            alert('不能删除未受理的记录')
                        }
                    }
                },
                gotoPrevPage() {
                    if (this.currentPage > 1) {
                        this.currentPage -= 1
                        this.loadData()
                    }
                },
                gotoNextPage() {
                    if (this.currentPage < this.totalPage) {
                        this.currentPage += 1
                        this.loadData()
                    }
                },
                loadData() {
                    let url = '/api/records/?page=' + this.currentPage
                    if (this.keyword.length > 0) {
                        url += '&keyword=' + this.keyword
                    }
                    fetch(url).then(resp => resp.json()).then(json => {
                        this.records = json.results
                        this.totalPage = json.totalPage
                        this.searched = this.records.length > 0
                    })
                }
            }
        })
    </script>
</body>
</html>